<template>
	<view>
		<!-- 沉浸式动画背景 -->
		<gal-animate-bg>
			<view class="banner">
				<!-- 状态栏占位 -->
				<view><gal-status-bar></gal-status-bar></view>
				<!-- 标题 -->
				<view class="banner-title-main">
					<view>
						<gal-text-fade 
						ref="animation1" 
						text="GraceUI 动画库" 
						styleSet="font-size:50rpx; color:#FFFFFF;"></gal-text-fade>
					</view>
					<view style="height:12rpx;"></view>
					<view>
						<gal-css-animate>
							<text class="gal-block-text gal-text-center gal-text-small gal-color-white">Grace Animation Library · GraceUI.com </text>
						</gal-css-animate>
					</view>
				</view>
			</view>
		</gal-animate-bg>
		<scroll-view
		scroll-y class="scrollView" 
		:style="{height:scrollHeight+'px'}">
			<view style="padding:30rpx; margin-top:15rpx;">
				<gal-demo-list :pageList="demoList"></gal-demo-list>
			</view>
		</scroll-view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			scrollHeight : 300,
			demoList: [
				{
					title : "基础用法",
					desc  : "animate 组件 · 动画 api",
					pages : [
						['gal-css-animate 组件演示', '/pages/demo/css-animate'],
						['gal-css-animate 连贯动画', '/pages/demo/css-animate2'],
						['gal-api-animate 组件演示', '/pages/demo/api-animate'],
					]
				},
				{
					title : "文本动画",
					desc  : "常用文本动画封装",
					pages : [
						['文本淡入淡出', '/pages/demo/text/text-fade'],
						['文本背景动画', '/pages/demo/text/clip-text'],
						['数值展示动画', '/pages/demo/text/number-show'],
					]
				},
				{
					title : "按钮动画",
					desc  : "提交 · 点赞等",
					pages : [
						['提交按钮动画', '/pages/demo/buttons/submit'],
						['边框动画按钮', '/pages/demo/buttons/outlinebutton'],
						['点赞按钮动画', '/pages/demo/buttons/praise'],
					]
				},
				{
					title : "常用动画",
					desc  : "",
					pages : [
						['全屏加载动画', '/pages/demo/other/sloading'],
						['渐变背景动画', '/pages/demo/other/background'],
						['时间时钟动画', '/pages/demo/other/clock'],
						['红包雨动画', '/pages/demo/other/red-envelope-rain']
					]
				},
			],
		}
	},
	onLoad() {
		var system          = uni.getSystemInfoSync();
		var statusBarHeight = system.statusBarHeight;
		// #ifdef H5
		this.scrollHeight   = system.windowHeight - uni.upx2px(330);
		// #endif
		// #ifndef H5
		this.scrollHeight   = system.windowHeight - uni.upx2px(416);
		// #endif
	},
	methods: {
		
	}
}
</script>
<style>
.banner{width:100%; padding-bottom:88rpx;}
.banner-title-main{padding-top:130rpx;}
.banner-title{font-size:50rpx; color:#FFFFFF;}
.scrollView{width:750rpx;}
</style>
